import React, { createElement, useEffect, useState } from 'react';
import { Form, Row, Col, Select, Button, ConfigProvider } from 'dw-mx';
import { Code } from 'dw-mx-extend';

export default function SelectDemo() {
    const [form] = Form.useForm();
    const [targetDom, updateTargetDom] = useState(null);
    useEffect(() => {
        // 可以从外部填值
        form.setFieldsValue({
            xb: '1',
        });
        const popup = document.getElementById('layout');

        if (popup !== null) {
            updateTargetDom(popup);
        }
    }, []);

    const onClick = async (value) => {
        // 可以从外部取值
        console.log(form.getFieldsValue());

        // 可以验证必填项
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
        } catch (errorInfo) {
            // 验证失败
            console.log('Failed:', errorInfo);
        }
    };

    const onChange = (value) => {
        // 可以监听 onchange
        alert(value);
    };

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };

    return (
        <>
            <Form form={form} {...layout} layout={'horizontal'} className={'nameSpace'}>
                <Row>
                    <Col span={8}>
                        <Form.Item label="性别" name="xb" rules={[{ required: true }]}>
                            <Select onChange={onChange} options={Code.STRINGCODE('1:男,2:女')} allowClear={true} placeholder={'请选择...'} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="任务状态" name="rwzt" rules={[{ required: true }]}>
                            <Select onChange={onChange} dropdownMatchSelectWidth options={Code.STRINGCODE('1:已完成,2:未完成,3:已作废')} allowClear={true} placeholder={'请选择...'} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="业务类型" name="ywlx" rules={[{ required: true }]}>
                            <Select
                                onChange={onChange}
                                allowClear={true}
                                placeholder={'请选择...'}
                                options={Code.STRINGCODE('1:计划建立,2:待遇支付,3:缴费管理,4:交易处理,5:交易处理,6:匹配处理,7:计划管理,8:单位管理,9:人员管理,10:考核管理')}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="民族" name="mz" rules={[{ required: true }]}>
                            <Select onChange={onChange} allowClear={true} placeholder={'请选择...'} options={Code.STRINGCODE('1:汉族,2:朝鲜族')} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Button onClick={onClick}>取值</Button>
        </>
    );
}
